<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons type="left" size="24" color="#fff" class="back-icon" @click="handleBack"></uni-icons>
      <text class="nav-title">健康商城</text>
      <uni-icons type="cart" size="24" color="#fff" class="cart-icon" @click="showCart">
        <text class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</text>
      </uni-icons>
    </view>

    <!-- 主体内容：等距布局的商城模块 -->
    <view class="main-content">
      <!-- 左侧：分类筛选区 -->
      <view class="module left-module">
        <text class="module-title">商品分类</text>
        
        <!-- 搜索框 -->
        <view class="search-box">
          <uni-icons type="search" size="18" color="#888" class="search-icon"></uni-icons>
          <input 
            class="search-input" 
            placeholder="搜索药品/健康产品" 
            v-model="searchKey"
            @input="handleSearch"
          >
        </view>

        <!-- 分类列表 -->
        <view class="category-list">
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'all' }"
            @click="setActiveCategory('all')"
          >
            全部商品
          </view>
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'medicine' }"
            @click="setActiveCategory('medicine')"
          >
            处方药
          </view>
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'otc' }"
            @click="setActiveCategory('otc')"
          >
            非处方药
          </view>
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'health' }"
            @click="setActiveCategory('health')"
          >
            保健品
          </view>
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'equipment' }"
            @click="setActiveCategory('equipment')"
          >
            医疗器材
          </view>
          <view 
            class="category-item" 
            :class="{ active: activeCategory === 'care' }"
            @click="setActiveCategory('care')"
          >
            护理用品
          </view>
        </view>

        <!-- 筛选条件 -->
       <!-- <view class="filter-section">
          <text class="filter-title">筛选条件</text>
          <view class="filter-checks">
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.prescription" />
              <text class="check-text">需处方</text>
            </view>
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.promotion" />
              <text class="check-text">促销商品</text>
            </view>
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.fastDelivery" />
              <text class="check-text">极速配送</text>
            </view>
          </view>
        </view> -->
      </view>

      <!-- 中间：商品列表区 -->
      <view class="module center-module">
        <text class="module-title">商品列表</text>
        
        <!-- 排序选项 -->
        <view class="sort-options">
          <view 
            class="sort-item" 
            :class="{ active: sortType === 'default' }"
            @click="setSortType('default')"
          >
            默认排序
          </view>
          <view 
            class="sort-item" 
            :class="{ active: sortType === 'price-asc' }"
            @click="setSortType('price-asc')"
          >
            价格从低到高
          </view>
          <view 
            class="sort-item" 
            :class="{ active: sortType === 'price-desc' }"
            @click="setSortType('price-desc')"
          >
            价格从高到低
          </view>
          <view 
            class="sort-item" 
            :class="{ active: sortType === 'sales' }"
            @click="setSortType('sales')"
          >
            销量优先
          </view>
        </view>

        <!-- 商品列表 -->
        <view class="product-list">
          <view 
            class="product-item" 
            v-for="(product, index) in filteredProducts" 
            :key="index"
            @click="showProductDetail(product)"
          >
            <view class="product-img">
              <uni-icons type="image" size="60" color="#ccc"></uni-icons>
              <view class="tag-badge" v-if="product.promotion">促销</view>
            </view>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <text class="product-desc">{{ product.spec }}</text>
              <view class="product-price">
                <text class="current-price">¥{{ product.price.toFixed(2) }}</text>
                <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice.toFixed(2) }}</text>
              </view>
              <view class="product-sales">
                <text class="sales-count">销量 {{ product.sales }}件</text>
              </view>
            </view>
            <view class="add-cart-btn" @click.stop="addToCart(product)">
              <uni-icons type="plus" size="18" color="#fff"></uni-icons>
            </view>
          </view>
        </view>

        <!-- 空状态提示 -->
        <view class="empty-tip" v-if="filteredProducts.length === 0">
          <uni-icons type="goods" size="48" color="#ccc"></uni-icons>
          <text class="empty-text">暂无符合条件的商品</text>
        </view>
      </view>

      <!-- 右侧：推荐与服务区 -->
      <view class="module right-module">
        <text class="module-title">服务与推荐</text>
        
        <!-- 优惠券 -->
        <view class="coupon-section">
          <text class="section-title">优惠券</text>
          <view class="coupon-list">
            <view class="coupon-item" v-for="(coupon, index) in coupons" :key="index">
              <text class="coupon-value">¥{{ coupon.value }}</text>
              <text class="coupon-desc">满{{ coupon.condition }}可用</text>
              <text class="coupon-expiry">有效期至{{ coupon.expiry }}</text>
            </view>
          </view>
        </view>

        <!-- 热销推荐 -->
        <view class="hot-recommend">
          <text class="section-title">热销推荐</text>
          <view class="recommend-list">
            <view 
              class="recommend-item" 
              v-for="(item, index) in hotProducts" 
              :key="index"
              @click="showProductDetail(item)"
            >
              <uni-icons type="image" size="40" color="#ccc" class="recommend-img"></uni-icons>
              <text class="recommend-name">{{ item.name }}</text>
              <text class="recommend-price">¥{{ item.price.toFixed(2) }}</text>
            </view>
          </view>
        </view>

        <!-- 服务说明 -->
        <view class="service-info">
          <view class="service-item">
            <uni-icons type="truck" size="16" color="#6b7fd7"></uni-icons>
            <text class="service-text">满99元免运费</text>
          </view>
          <view class="service-item">
            <uni-icons type="shield" size="16" color="#6b7fd7"></uni-icons>
            <text class="service-text">正品保障</text>
          </view>
          <view class="service-item">
            <uni-icons type="clock" size="16" color="#6b7fd7"></uni-icons>
            <text class="service-text">7*24小时服务</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品详情弹窗 -->
    <uni-popup 
      v-model="showDetailPopup" 
      type="center" 
      :mask-click="false"
      class="detail-popup"
    >
      <view class="popup-container">
        <view class="popup-header">
          <text class="popup-title">商品详情</text>
          <uni-icons type="close" size="20" color="#666" class="close-icon" @click="showDetailPopup = false"></uni-icons>
        </view>
        
        <view class="product-detail">
          <view class="detail-img">
            <uni-icons type="image" size="120" color="#ccc"></uni-icons>
          </view>
          <view class="detail-info">
            <text class="detail-name">{{ currentProduct.name }}</text>
            <text class="detail-spec">{{ currentProduct.spec }}</text>
            <view class="detail-price">
              <text class="detail-current-price">¥{{ currentProduct.price.toFixed(2) }}</text>
              <text class="detail-original-price" v-if="currentProduct.originalPrice">¥{{ currentProduct.originalPrice.toFixed(2) }}</text>
              <text class="detail-tag" v-if="currentProduct.promotion">促销</text>
            </view>
            <text class="detail-desc">{{ currentProduct.description }}</text>
          </view>
          
          <view class="buy-options">
            <text class="option-label">购买数量</text>
            <view class="quantity-control">
              <view class="quantity-btn minus-btn" @click="decreaseQuantity">-</view>
              <text class="quantity">{{ buyQuantity }}</text>
              <view class="quantity-btn plus-btn" @click="increaseQuantity">+</view>
            </view>
          </view>
        </view>
        
        <view class="popup-footer">
          <view class="footer-btn cancel-btn" @click="showDetailPopup = false">取消</view>
          <view class="footer-btn buy-now-btn" @click="gotoPayment">立即购买</view>
        </view>
      </view>
    </uni-popup>

    <!-- 购物车弹窗 -->
    <uni-popup 
      v-model="showCartPopup" 
      type="bottom"
      class="cart-popup"
    >
      <view class="cart-popup-container">
        <view class="cart-header">
          <text class="cart-title">我的购物车</text>
          <uni-icons type="close" size="20" color="#666" class="close-icon" @click="showCartPopup = false"></uni-icons>
        </view>
        
        <view class="cart-list" v-if="cartItems.length > 0">
          <view 
            class="cart-item" 
            v-for="(item, index) in cartItems" 
            :key="index"
          >
            <text class="cart-product-name">{{ item.name }}</text>
            <text class="cart-product-price">¥{{ item.price.toFixed(2) }}</text>
            <view class="cart-quantity">
              <view class="quantity-btn minus-btn" @click="decreaseCartQuantity(index)">-</view>
              <text class="quantity">{{ item.quantity }}</text>
              <view class="quantity-btn plus-btn" @click="increaseCartQuantity(index)">+</view>
            </view>
            <view class="remove-btn" @click="removeFromCart(index)">
              <uni-icons type="trash" size="16" color="#e74c3c"></uni-icons>
            </view>
          </view>
        </view>
        
        <view class="cart-empty" v-if="cartItems.length === 0">
          <uni-icons type="cart" size="48" color="#ccc"></uni-icons>
          <text class="empty-text">购物车是空的</text>
        </view>
        
        <view class="cart-footer" v-if="cartItems.length > 0">
          <view class="total-price">
            <text class="total-label">合计：</text>
            <text class="total-value">¥{{ calculateTotal().toFixed(2) }}</text>
          </view>
          <view class="checkout-btn" @click="gotoPaymentFromCart">结算</view>
        </view>
      </view>
    </uni-popup>

    <!-- 支付弹窗 -->
    <uni-popup 
      v-model="showPaymentPopup" 
      type="center"
      :mask-click="false"
      class="payment-popup"
    >
      <view class="payment-container">
        <view class="payment-header">
          <text class="payment-title">确认支付</text>
          <uni-icons type="close" size="20" color="#666" class="close-icon" @click="showPaymentPopup = false"></uni-icons>
        </view>
        
        <view class="payment-details">
          <view class="payment-item">
            <text class="detail-label">商品名称：</text>
            <text class="detail-value">{{ paymentProduct.name }}</text>
          </view>
          <view class="payment-item">
            <text class="detail-label">规格：</text>
            <text class="detail-value">{{ paymentProduct.spec }}</text>
          </view>
          <view class="payment-item">
            <text class="detail-label">数量：</text>
            <text class="detail-value">{{ paymentQuantity }}</text>
          </view>
          <view class="payment-item">
            <text class="detail-label">单价：</text>
            <text class="detail-value">¥{{ paymentProduct.price.toFixed(2) }}</text>
          </view>
          <view class="payment-divider"></view>
          <view class="payment-item total-payment">
            <text class="detail-label">实付款：</text>
            <text class="detail-value">¥{{ (paymentProduct.price * paymentQuantity).toFixed(2) }}</text>
          </view>
        </view>
        
        <view class="payment-methods">
          <text class="method-title">支付方式</text>
          <view 
            class="method-item" 
            :class="{ active: paymentMethod === 'wechat' }"
            @click="setPaymentMethod('wechat')"
          >
            <uni-icons type="weixin" size="20" color="#07C160"></uni-icons>
            <text class="method-name">微信支付</text>
            <uni-icons type="checkmark" size="18" color="#6b7fd7" class="method-check" v-if="paymentMethod === 'wechat'"></uni-icons>
          </view>
          <view 
            class="method-item" 
            :class="{ active: paymentMethod === 'alipay' }"
            @click="setPaymentMethod('alipay')"
          >
            <uni-icons type="alipay" size="20" color="#1677FF"></uni-icons>
            <text class="method-name">支付宝</text>
            <uni-icons type="checkmark" size="18" color="#6b7fd7" class="method-check" v-if="paymentMethod === 'alipay'"></uni-icons>
          </view>
        </view>
        
        <view class="payment-footer">
          <view class="footer-btn confirm-payment-btn" @click="confirmPayment">
            确认支付 ¥{{ (paymentProduct.price * paymentQuantity).toFixed(2) }}
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 支付成功提示 -->
    <uni-popup 
      v-model="showSuccessPopup" 
      type="center"
      :mask-click="false"
      class="success-popup"
    >
      <view class="success-container">
        <uni-icons type="success" size="60" color="#45b787" class="success-icon"></uni-icons>
        <text class="success-title">支付成功</text>
        <text class="success-message">您的订单已提交，将尽快为您发货</text>
        <view class="success-btn" @click="showSuccessPopup = false">完成</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 页面加载
onLoad(() => {
  // 初始化商品数据
  initProducts();
  // 初始化优惠券数据
  initCoupons();
});

// 导航返回
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 搜索关键词
const searchKey = ref('');
// 选中的分类
const activeCategory = ref('all');
// 排序类型
const sortType = ref('default');
// 筛选参数
const filterParams = ref({
  prescription: false,
  promotion: false,
  fastDelivery: false
});

// 商品数据
const products = ref([]);
// 初始化商品数据
const initProducts = () => {
  products.value = [
    {
      id: 1,
      name: '感冒灵颗粒',
      spec: '10g*9袋/盒',
      price: 19.8,
      originalPrice: 25.0,
      type: 'otc',
      sales: 1256,
      promotion: true,
      needPrescription: false,
      fastDelivery: true,
      description: '用于感冒引起的头痛、发热、鼻塞、流涕、咽痛等症状'
    },
    {
      id: 2,
      name: '布洛芬缓释胶囊',
      spec: '0.3g*20粒/盒',
      price: 28.5,
      originalPrice: 35.0,
      type: 'otc',
      sales: 896,
      promotion: false,
      needPrescription: false,
      fastDelivery: true,
      description: '用于缓解轻至中度疼痛如头痛、关节痛、偏头痛、牙痛、肌肉痛、神经痛、痛经。也用于普通感冒或流行性感冒引起的发热。'
    },
    {
      id: 3,
      name: '盐酸二甲双胍片',
      spec: '0.5g*30片/盒',
      price: 32.8,
      type: 'medicine',
      sales: 563,
      promotion: false,
      needPrescription: true,
      fastDelivery: true,
      description: '用于单纯饮食控制不满意的II型糖尿病病人，尤其是肥胖和伴高胰岛素血症者'
    },
    {
      id: 4,
      name: '维生素C咀嚼片',
      spec: '100mg*60片/瓶',
      price: 45.0,
      originalPrice: 58.0,
      type: 'health',
      sales: 1025,
      promotion: true,
      needPrescription: false,
      fastDelivery: true,
      description: '补充维生素C，增强免疫力'
    },
    {
      id: 5,
      name: '电子体温计',
      spec: '家用精准测量',
      price: 69.0,
      type: 'equipment',
      sales: 782,
      promotion: false,
      needPrescription: false,
      fastDelivery: true,
      description: '快速测量体温，精准度高，适合家庭使用'
    },
    {
      id: 6,
      name: '医用外科口罩',
      spec: '50只/盒',
      price: 25.8,
      type: 'care',
      sales: 2356,
      promotion: false,
      needPrescription: false,
      fastDelivery: true,
      description: '三层防护，一次性使用，舒适透气'
    }
  ];
};

// 优惠券数据
const coupons = ref([]);
const initCoupons = () => {
  coupons.value = [
    { value: 10, condition: 99, expiry: '2024-12-31' },
    { value: 20, condition: 199, expiry: '2024-12-31' },
    { value: 50, condition: 399, expiry: '2024-12-31' }
  ];
};

// 热销推荐商品
const hotProducts = computed(() => {
  return [...products.value].sort((a, b) => b.sales - a.sales).slice(0, 3);
});

// 筛选后的商品
const filteredProducts = computed(() => {
  let result = [...products.value];
  
  // 分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter(item => item.type === activeCategory.value);
  }
  
  // 搜索筛选
  if (searchKey.value) {
    const keyword = searchKey.value.toLowerCase();
    result = result.filter(item => 
      item.name.toLowerCase().includes(keyword) || 
      item.spec.toLowerCase().includes(keyword)
    );
  }
  
  // 处方筛选
  if (filterParams.value.prescription) {
    result = result.filter(item => item.needPrescription);
  }
  
  // 促销筛选
  if (filterParams.value.promotion) {
    result = result.filter(item => item.promotion);
  }
  
  // 配送筛选
  if (filterParams.value.fastDelivery) {
    result = result.filter(item => item.fastDelivery);
  }
  
  // 排序处理
  switch (sortType.value) {
    case 'price-asc':
      result.sort((a, b) => a.price - b.price);
      break;
    case 'price-desc':
      result.sort((a, b) => b.price - a.price);
      break;
    case 'sales':
      result.sort((a, b) => b.sales - a.sales);
      break;
    default:
      // 默认排序（按ID）
      result.sort((a, b) => a.id - b.id);
  }
  
  return result;
});

// 购物车相关
const cartItems = ref([]);
const cartCount = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0);
});

// 添加到购物车
const addToCart = (product) => {
  const existingItem = cartItems.value.find(item => item.id === product.id);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cartItems.value.push({ ...product, quantity: 1 });
  }
  uni.showToast({ title: '已加入购物车', icon: 'none' });
};

// 减少购物车数量
const decreaseCartQuantity = (index) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity -= 1;
  } else {
    cartItems.value.splice(index, 1);
  }
};

// 增加购物车数量
const increaseCartQuantity = (index) => {
  cartItems.value[index].quantity += 1;
};

// 从购物车移除
const removeFromCart = (index) => {
  cartItems.value.splice(index, 1);
};

// 计算购物车总价
const calculateTotal = () => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0);
};

// 购物车弹窗控制
const showCartPopup = ref(false);
const showCart = () => {
  showCartPopup.value = true;
};

// 商品详情弹窗相关
const showDetailPopup = ref(false);
const currentProduct = ref({});
const buyQuantity = ref(1);

// 显示商品详情
const showProductDetail = (product) => {
  currentProduct.value = { ...product };
  buyQuantity.value = 1;
  showDetailPopup.value = true;
};

// 减少购买数量
const decreaseQuantity = () => {
  if (buyQuantity.value > 1) {
    buyQuantity.value--;
  }
};

// 增加购买数量
const increaseQuantity = () => {
  buyQuantity.value++;
};

// 支付相关
const showPaymentPopup = ref(false);
const paymentProduct = ref({});
const paymentQuantity = ref(1);
const paymentMethod = ref('wechat');
const showSuccessPopup = ref(false);

// 去支付（从商品详情）
const gotoPayment = () => {
  paymentProduct.value = { ...currentProduct.value };
  paymentQuantity.value = buyQuantity.value;
  showDetailPopup.value = false;
  showPaymentPopup.value = true;
};

// 去支付（从购物车）
const gotoPaymentFromCart = () => {
  // 简化处理，实际项目中可能需要处理多商品支付
  paymentProduct.value = { ...cartItems.value[0] };
  paymentQuantity.value = cartItems.value[0].quantity;
  // 清空购物车
  cartItems.value = [];
  showCartPopup.value = false;
  showPaymentPopup.value = true;
};

// 设置支付方式
const setPaymentMethod = (method) => {
  paymentMethod.value = method;
};

// 确认支付
const confirmPayment = () => {
  showPaymentPopup.value = false;
  // 模拟支付过程
  setTimeout(() => {
    showSuccessPopup.value = true;
  }, 1000);
};

// 筛选和排序事件处理
const handleSearch = () => {};
const setActiveCategory = (category) => {
  activeCategory.value = category;
};
const setSortType = (type) => {
  sortType.value = type;
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.back-icon, .cart-icon {
  cursor: pointer;
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-icon {
  position: relative;
}

/* 主体内容布局 */
.main-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：分类筛选区 */
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.search-icon {
  margin-right: 10px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.category-item {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-item.active {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.filter-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-check {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.check-text {
  margin-left: 8px;
}

/* 中间：商品列表区 */
.sort-options {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.sort-item {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border-radius: 20px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-item.active {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.product-item {
  width: calc(50% - 7.5px);
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.1);
}

.product-img {
  width: 100%;
  height: 100px;
  background-color: #f5f7fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
}

.tag-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.product-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.product-price {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.current-price {
  font-size: 14px;
  color: #e74c3c;
  font-weight: bold;
  margin-right: 8px;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.product-sales {
  font-size: 12px;
  color: #999;
}

.add-cart-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #ccc;
}

.empty-text {
  margin-top: 15px;
  font-size: 14px;
}

/* 右侧：推荐与服务区 */
.coupon-section, .hot-recommend {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coupon-item {
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  border-radius: 8px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.coupon-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(-15deg) translateX(10px);
}

.coupon-value {
  font-size: 18px;
  font-weight: bold;
  color: #c2410c;
  margin-right: 10px;
}

.coupon-desc {
  font-size: 12px;
  color: #c2410c;
}

.coupon-expiry {
  font-size: 10px;
  color: #c2410c;
  display: block;
  margin-top: 5px;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommend-item {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recommend-item:hover {
  background-color: #e6eaf5;
}

.recommend-img {
  margin-right: 10px;
}

.recommend-name {
  font-size: 12px;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-price {
  font-size: 12px;
  color: #e74c3c;
  font-weight: bold;
}

.service-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.service-text {
  margin-left: 8px;
}

/* 商品详情弹窗 */
.detail-popup {
  width: 90%;
  max-width: 600px;
}

.popup-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-icon {
  cursor: pointer;
}

.product-detail {
  margin-bottom: 20px;
}

.detail-img {
  width: 100%;
  height: 200px;
  background-color: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.detail-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.detail-spec {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.detail-price {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-current-price {
  font-size: 20px;
  color: #e74c3c;
  font-weight: bold;
  margin-right: 10px;
}

.detail-original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-right: 10px;
}

.detail-tag {
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.buy-options {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.option-label {
  font-size: 14px;
  color: #666;
  margin-right: 15px;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.quantity {
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.popup-footer {
  display: flex;
  gap: 15px;
}

.footer-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background-color: #f5f7fa;
  color: #666;
}

.buy-now-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

/* 购物车弹窗 */
.cart-popup {
  width: 100%;
}

.cart-popup-container {
  background-color: #ffffff;
  border-radius: 12px 12px 0 0;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-product-name {
  font-size: 14px;
  color: #333;
  flex: 2;
}

.cart-product-price {
  font-size: 14px;
  color: #e74c3c;
  font-weight: bold;
  margin-right: 15px;
  width: 80px;
  text-align: right;
}

.cart-quantity {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.remove-btn {
  cursor: pointer;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #ccc;
}

.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.total-price {
  display: flex;
  align-items: center;
}

.total-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.total-value {
  font-size: 18px;
  color: #e74c3c;
  font-weight: bold;
}

.checkout-btn {
  padding: 10px 25px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 支付弹窗 */
.payment-popup {
  width: 90%;
  max-width: 500px;
}

.payment-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.payment-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.payment-details {
  margin-bottom: 20px;
}

.payment-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-label {
  font-size: 14px;
  color: #666;
  width: 80px;
}

.detail-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.payment-divider {
  height: 10px;
  background-color: #f5f7fa;
  margin: 5px 0;
}

.total-payment {
  font-weight: bold;
}

.total-payment .detail-value {
  color: #e74c3c;
  font-size: 16px;
}

.payment-methods {
  margin-bottom: 20px;
}

.method-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.method-item.active {
  background-color: #e6eaf5;
  border: 1px solid #6b7fd7;
}

.method-name {
  font-size: 14px;
  color: #333;
  flex: 1;
  margin-left: 10px;
}

.method-check {
  opacity: 0.8;
}

.payment-footer {
  margin-top: 20px;
}

.confirm-payment-btn {
  width: 100%;
  padding: 14px 0;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 支付成功弹窗 */
.success-popup {
  width: 80%;
  max-width: 300px;
}

.success-container {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  margin-bottom: 20px;
}

.success-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.success-message {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}

.success-btn {
  padding: 10px 30px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .product-item {
    width: 100%;
  }
}
</style>
